import {
  ProForm,
  ProFormDigit,
  ProFormMoney,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page3: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>数字输入表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="productName"
          label="产品名称"
          placeholder="请输入产品名称"
          rules={[{ required: true, message: "请输入产品名称" }]}
        />

        <ProFormDigit
          name="quantity"
          label="数量"
          placeholder="请输入数量"
          min={1}
          max={1000}
          rules={[{ required: true, message: "请输入数量" }]}
        />

        <ProFormMoney
          name="price"
          label="单价"
          placeholder="请输入单价"
          min={0}
          rules={[{ required: true, message: "请输入单价" }]}
        />

        <ProFormDigit
          name="discount"
          label="折扣率"
          placeholder="请输入折扣率"
          min={0}
          max={100}
          fieldProps={{
            suffix: "%",
          }}
        />

        <ProFormMoney
          name="totalAmount"
          label="总金额"
          readonly
          fieldProps={{
            value: 0,
          }}
        />
      </ProForm>
    </div>
  );
};

export default Page3;
